<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        color: black;
      }

      .title {
        text-align: center;
        color: black;
        font-size: 30px;
        margin: 30px 0;
      }

      .grip {
        width: 530px;
        margin: 0 auto;
        background-color: #f3dcab;
        text-align: center;
      }

      .grip span {
        display: inline-block;
        height: 35px;
        line-height: 35px;
      }

      .book table {
        width: 100%;
        border-top: 1px solid #cccccc;
      }

      .book {
        background-color: #ffffff;
      }

      .book td {
        padding: 10;
        border: 1px dashed #f3dcab;
        height: 35px;
        line-height: 35px;
      }

      .total {
        height: 35px;
        width: 100%;
        line-height: 35px;
        border-top: 2px solid #cccccc;
      }

      [v-cloak] {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="title">图书管理</div>

      <div class="grip">
        <div>
          <span>
            <label>编号</label>
            <input type="text" id="id" v-model="id" :disabled="flag" v-focus />
            <label>名称</label>
            <input type="text" id="name" v-model="name" />
            <button @click="handle" :disabled="submitflag">添加</button>
          </span>
        </div>
        <div class="total">图书总数:{{total}}</div>
        <div class="book">
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr :key="item.id" v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                <td>
                  <a href="#" @click.prevent="change(item.id)">修改</a> |
                  <a href="#" @click.prevent="delBook(item.id)">删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script src="js/vue.js "></script>
    <script>
      //聚焦
      Vue.directive("focus", {
        inserted: function (el) {
          el.focus();
        },
      });
      //格式化时间
      Vue.filter("format", function (value, arg) {
        function dateFormat(date, format) {
          if (typeof date === "string") {
            var mts = date.match(/(\/Date\((\d+)\)\/)/);
            if (mts && mts.length >= 3) {
              date = parseInt(mts[2]);
            }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
            return "";
          }
          var map = {
            M: date.getMonth() + 1, //月份
            d: date.getDate(), //日
            h: date.getHours(), //小时
            m: date.getMinutes(), //分
            s: date.getSeconds(), //秒
            q: Math.floor((date.getMonth() + 3) / 3), //季度
            S: date.getMilliseconds(), //毫秒
          };

          format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
            var v = map[t];
            if (v !== undefined) {
              if (all.length > 1) {
                v = "0" + v;
                v = v.substr(v.length - 2);
              }
              return v;
            } else if (t === "y") {
              return (date.getFullYear() + "").substr(4 - all.length);
            }
            return all;
          });
          return format;
        }

        return dateFormat(value, arg);
      });
      var vm = new Vue({
        el: "#app",
        data: {
          id: "",
          name: "",
          flag: false,
          submitflag: false,
          books: [],
        },

        methods: {
          handle: function () {
            // 编辑图书
            // 就是根据当前的ID去更新数组中对应的数据

            if (this.flag) {
              this.books.some((item) => {
                if (item.id == this.id) {
                  item.name = this.name;
                  // 完成更新操作之后，需要终止循环
                  return true;
                }
              });
              this.flag = false;
            } else {
              //添加图书
              var book = {};
              book.id = this.id;
              book.name = this.name;
              book.date = 2525609975000;
              this.books.push(book);
              // 添加表单
              this.id = "";
              this.name = "";
            }
          },
          change: function (id) {
            this.flag = true;
            // 根据ID查询出要编辑的数据
            var book = this.books.filter(function (item) {
              return item.id == id;
            });
            console.log(book);
            //把查出的数据填充到页面
            this.id = book[0].id;
            this.name = book[0].name;
          },

          //删除
          delBook: function (id) {
            this.books = this.books.filter(function (item) {
              return item.id != id;
            });

            // var index = this.books.findIndex(function(item) {
            //     return item.id == id;
            // })
            // this.books.splice(index, 1);
          },
        },
        computed: {
          total: function () {
            return this.books.length;
          },
        },

        watch: {
          //判断图书是否添加过，如果添加则禁用按钮
          name: function (val) {
            var flag = this.books.some(function (item) {
              return item.name == val;
            });
            if (flag) {
              this.submitflag = true;
            } else {
              this.submitflag = false;
            }
          },
        },
        // 模拟后台调用接口
        mounted: function () {
          // 该生命周期钩子函数被触发的时候，模板已经可以使用
          // 一般此时用于获取后台数据，然后把数据填充到模板
          var data = [
            {
              id: 1,
              name: "三国演义",
              date: 2525609975000,
            },
            {
              id: 2,
              name: "水浒传",
              date: 2525909975000,
            },
            {
              id: 3,
              name: "红楼梦",
              date: 2525609975000,
            },
            {
              id: 4,
              name: "西游记",
              date: 2525609975000,
            },
          ];
          this.books = data;
        },
      });
    </script>
  </body>
</html>
